<template>
  <div class="index-search" :class="{ changeBg: isBg }">
    <button
      @click="search"
      @mousemove="isButton = true"
      @mouseout="isButton = false"
    >
      <svg
        class="icon"
        width="18px"
        height="18px"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          :fill="isButton == true ? '#000' : '#767676'"
          d="M882.6369 904.308991 730.351542 708.192358c7.884574-6.656607 15.529695-13.647835 22.890336-21.0095 33.348526-33.350572 59.533908-72.194252 77.8296-115.453499 18.948561-44.803415 28.555359-92.378967 28.555359-141.40659 0-49.021483-9.607822-96.593965-28.556383-141.393287-18.295692-43.256176-44.481074-82.09781-77.828576-115.446335S681.053766 113.948215 637.797589 95.652524C592.99929 76.703963 545.429879 67.096141 496.409418 67.096141c-49.021483 0-96.593965 9.607822-141.394311 28.556383-43.256176 18.295692-82.098833 44.482097-115.446335 77.830623-33.348526 33.347502-59.533908 72.189136-77.830623 115.446335-18.948561 44.800345-28.556383 92.371804-28.556383 141.393287 0 49.027623 9.607822 96.603175 28.556383 141.40659 18.295692 43.259246 44.481074 82.10395 77.8296 115.453499 33.347502 33.349549 72.189136 59.536978 115.446335 77.833693 44.800345 18.948561 92.371804 28.556383 141.394311 28.556383 49.019437 0 96.590895-9.608845 141.389194-28.557406 12.920264-5.465478 25.436322-11.649318 37.541011-18.502399l154.415882 198.860117c11.339256 14.603603 31.987528 17.545608 46.119387 6.572696l1.705851-1.325182C891.713626 939.6458 893.977179 918.912593 882.6369 904.308991zM496.409418 732.173538c-166.428473 0-301.82928-135.410016-301.82928-301.851792 0-166.428473 135.399783-301.828256 301.82928-301.828256 166.423357 0 301.818023 135.399783 301.818023 301.828256C798.228465 596.763522 662.832775 732.173538 496.409418 732.173538z"
        />
      </svg>
    </button>
    <div>
      <input
        v-model="searchtext"
        title="search unplush"
        @focus="isBg = true"
        @blur="isBg = false"
        type="text"
        placeholder="搜索免费的高分辨率照片"
      />
      <div class="searchpop" v-show="issearchpop">
        <img src="~@/assets/Index/img/icon/jingshi.png" alt="" />
        <span>请填写此段</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isBg: false,
      isButton: false,
      searchtext: "",
      issearchpop: false,
      poptimeout: "",
      // 暂存当前的参数
      // currKey:""
    };
  },
  mounted(){
    this.$bus.$on("sh",(a)=>{
      this.searchtext=a.a
      this.search()
    })
  },
  methods: {
    search() {
      if (this.searchtext.trim().length ==0) {
        this.issearchpop = true;
        this.poptimeout == ""
          ? (this.poptimeout = setTimeout(()=> {
              this.issearchpop = !this.issearchpop;
              this.poptimeout = "";
            }, 2000))
          : "";
      } else {
        this.issearchpop = false;
        clearTimeout(this.poptimeout);
        this.poptimeout = "";
        // if(this.currKey!==this.searchtext){
           this.$router.push(`/index/nb/${this.searchtext.trim()}`).catch(v=>{})
        // this.currKey=this.searchtext
        // }
      }
    },
  },
  
   
  }
</script>

<style>
.index-search {
  display: inline-block;
  padding: 0px 10px;
  flex: 0.9;
  background-color: #eeeeee;
  border-radius: 20px;
  display: flex;
  font-size: 14px !important;
  justify-content: space-between;
  border: 1px solid rgba(255, 255, 255, 0);
}

.index-search:hover {
  border: 1px solid #d1d1d1;
}

.index-search > button {
  border: 0px;
  border-radius: 20px 0px 0px 20px;
  width: 28px;
  margin-left: -5px;
  background-color: rgba(255, 255, 0, 0);
}

.index-search > div {
  position: relative;
  width: 98%;
  background-color: rgba(255, 255, 0, 0);
}
.index-search > div .searchpop {
  position: absolute;
  background-color: #ffffff;
  font-size: 14px;
  padding: 5px;
  left: 100px;
  top: 51px;
  border: 1px solid #808080;
  border-radius: 5px;
  display: flex;
  align-items: center;
}
.index-search > div .searchpop::before {
  content: "";
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  position: absolute;
  left: 16px;
  top: -9px;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  background-color: #ffffff;
}
.index-search > div > input {
  border: 0px;
  width: 98%;
  background-color: rgba(255, 255, 0, 0);
  margin-top: 8px;
}
.changeBg {
  border: 1px solid #d1d1d1 !important;
  background-color: #fff !important;
}
</style>